@layout("/common/_container.html"){

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        部门：
                        <select id="department" style="width: 100px">
                            <option value="">所有</option>
                            @ for(dep in depts!){
                            <option value="${dep.fullname}" code="${dep.id}">${dep.fullname}</option>
                            @}
                        </select>

                        &nbsp;&nbsp;处/室：
                        <select id="place" style="width: 100px">

                        </select>
                        &nbsp;&nbsp;班组：
                        <select id="team" style="width: 100px">

                        </select>

                        &nbsp;&nbsp;岗位：
                        <select id="post" style="width: 100px">
                            <option value=""></option>
                            @ for(post in posts!){
                            <option value="${post.num}">${post.name}</option>
                            @}
                        </select>
                        &nbsp;&nbsp;用工类型：
                        <select id="laborType" style="width: 100px">
                            <option value="">所有</option>
                            @ for(laborType in laborTypes!){
                            <option value="${laborType.name}">${laborType.name}</option>
                            @}
                        </select>
                        &nbsp;&nbsp;年度： <input type="text" class="layer-date" id="year" style="width: 100px"/>
                        <button onclick="load()" class="layui-btn layui-btn-normal layui-btn-xs">确定</button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="trainRation_pip" style="height: 500px">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/train/employee/employee.js?v=${version}"></script>
<script src="${ctxPath}/static/modular/train/employee/employee_info.js?v=${version}"></script>
<script>
    laydate.render({
        elem: '#year', //指定元素
        istime: 'false',
        type:'year',
        value:$("#year").val()
    });

    function load(){
        var param = {};
        param.year = $("#year").val();
        param.department = $("#department option:selected").val();
        param.place = $("#place option:selected").val();
        param.team = $("#team option:selected").val();
        param.postType = $("#post option:selected").val();
        param.laborType = $("#laborType option:selected").val();
        debugger
        var pipChart = echarts.init(document.getElementById('trainRation_pip'));
        var ajax = new $ax(Feng.ctxPath + "/analysis/trainRatioPip", function (data) {
            debugger
            var result = data.data;
//            var data = result.series;
//            var tips = result.legend;
//            pipChart.setOption(option);

            debugger
            pipChart.setOption({
                title: [{
                    text: '员工总数',
                    left: '49.5%',
                    top: '46%',
                    textAlign: 'center',
                    textBaseline: 'middle',
                    textStyle: {
                        color: '#222',
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                }, {
                    text: result.total,
                    left: '49.5%',
                    top: '51%',
                    textAlign: 'center',
                    textBaseline: 'middle',
                    textStyle: {
                        color: '#ffc72b',
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                }],
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    right: 40,
                    top: 100,
                    data: JSON.parse(result.legend)
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series: [{
                    name:"培训类别",
                    type: 'pie',
                    radius: [70, '60%'],
                    center: ['50%', '50%'],

                    data: JSON.parse(result.series),
                    label: {
                        normal: {
                            formatter: '{b}：{c}分  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,

                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },

                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 2
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 30,
                            shadowColor: 'rgba(0, 0, 0, 0.4)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function(idx) {
                        return Math.random() * 200;
                    }
                }]
            });
        });
        ajax.set(param);
        ajax.start();
    }

    $(function(){
        load();
    });
</script>
@}